<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <!-- 头部 -->
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">解除绑定微信</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scroll">
            <template v-if="pageStatus">
                <div class="preview-title">解除绑定微信</div>
                <div class="mt-item-wrap borderbtm flex-row align-center-row">
                    <div class="mt-item-label">绑定手机号</div>
                    <div class=" mt-panel-item">
                        <div class="mt-item-main mt-flex-inner">
                            <input type="tel" readonly name="user_phone" v-model="public_user_info.user_phone" placeholder="请输入您的手机号" id="userPhone" class="mt-item-input" />
                        </div>
                    </div>
                </div>
                <div class="mt-item-wrap flex-row align-center-row">
                    <div class="mt-item-label required">验证码</div>
                    <div class="mt-flex mt-flex-x mt-panel-item align-between-row align-center-row">
                        <div class="mt-item-main code">
                            <input type="tel" name="msg_content" maxlength="4" placeholder="请输入验证码" id="code" class="mt-item-input" />
                        </div>
                        <a href="javascript:;" class="mt-item-code mt-get-code" id="_code_" @click="getCode">获取验证码</a>
                    </div>
                </div>
            </template>
        </div>
        <div class="relative buttom-wrap" v-if="pageStatus">
            <div class="buttom">
                <div class="address-sure" @touchstart.stop @click="submit">下一步</div>
            </div>
        </div>
    </div>
</template>
<script>
import Validator from '@/utils/validator';
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import {
    LocalStorage
} from "@/utils/storage";
export default {
    name: 'my/setting/weChartChange',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            supply_ziying:{}
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getPageInfo({
                name:'my',
                param:{
                    invoke_method:'user_and_shop_info'
                }
            }).then(({result,response})=>{
                this.public_agent_info=result.public_agent_info||{};
                this.public_user_info=result.public_user_info||{};
                this.supply_ziying=result.supply_ziying||{};
                document.title=this.public_agent_info.application_name;
                this.setState({
                    key:'public_agent_info',
                    value:this.public_agent_info
                });
                this.setState({
                    key:'public_user_info',
                    value:this.public_user_info
                });
            });
        },
        /*
         * 获取验证码
         */
        getCode(event){
            var target = event.currentTarget;
            if(!(Validator({value:document.getElementById('userPhone').value,type:'phoneNumNuoer'}))){
                this.showMessage('手机号码不正确!');
                return;
            }
            if(!/disabled/.test(target.className)){
                this.$http.post({
                    name:'login',
                    data:{
                        invoke_method:'send_msg_phone',
                        user_phone:document.getElementById('userPhone').value,
                        pre_cmd_para_db_exist_user:true,
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    var data=data||{};
                    data.time=60;
                    target.className=target.className.concat(' disabled');
					target.innerHTML=data.time+'秒后获取';
					target.clear=setInterval(function(){
						if(data.time>1){
							target.innerHTML=--data.time+'秒后获取';
						}else{
							target.className=target.className.replace(/\sdisabled/,'');
							target.innerHTML='获取验证码';
							clearInterval(target.clear);
						};
					},1000);
                }).catch(({msg,status})=>{
                    this.showMessage(msg);
                });
			};
        },
        /*
         * 提交
         */
		submit() {
            var that=this;
            if(!(Validator({value:document.getElementById('userPhone').value,type:'phoneNumNuoer'}))){
                this.showMessage('手机号码不正确!');
                return;
            }
            if(!(Validator({value:document.getElementById('code').value,type:'positiveInteger'}))){
                this.showMessage('短信验证码格式不正确!');
                return;
            }
            if(!this.sending){
                this.sending=true;
                let loading=this.$$loading();
                this.$http.post({
                    name:'login',
                    data:{
                        invoke_method:'check_effect_phone',
                        user_phone:document.getElementById('userPhone').value,
                        msg_content:document.getElementById('code').value,
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    this.$http.post({
                        name:'login',
                        data:{
                            invoke_method:'unbind_sns_user',
                            id_public_user_info:this.public_user_info.id_public_user_info,
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        this.sending=false;
                        loading&&loading.close();                      
                        this.$$toast({
                            target:this.$el,
                            content:'解绑成功',
                            status:true,
                            callback:function(){
                            }
                        });
                        if(this.$native){
                            this.$native.exitLogin(function(data) {
                            })
                        }
                    }).catch(({msg})=>{
                        this.sending=false;
                        loading&&loading.close();
                        this.showMessage(msg);
                        document.getElementById('code').value=''
                    });
                }).catch(({msg})=>{
                    this.sending=false;
                    loading&&loading.close();
                    this.showMessage(msg);
                    document.getElementById('code').value=''
                });
            }	  
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        },
        /*
         * 页面跳转
         */
        goPage(item){
            var that = this;
            this.$router.push({
                path:item.path,
                query:{
                }
            });
        }
    },
    components:{
    },
    beforeDestroy(){

    }
}
</script>

<style lang="less" scoped>
.ui-header-item {
    height:2.35rem;
    line-height:2.35rem;
    background-size: 100% 100%;
}
.ui-header-arraw{
    width: 4.6rem;
    &.next{
        font-size:.91rem;
        color:#FEFEFE;
        line-height:2.35rem;
    }
}
img.app-image[lazy=loaded].auto {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}
.preview-title{
    padding-left:.85rem;
    height:2.4rem;
    font-size:.75rem;
    color:#878787;
    line-height:2.4rem;
}
.mt-item-wrap{
    position:relative;
    padding:0 .85rem;
    background:#fff;
    &.borderbtm::after {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        background: #eee;
        
    }
    .mt-item-label{
        width:28%;
    }
    .mt-item-main{
        width:60%;
    }
    .mt-panel-item{
        width:79%;
        .mt-item-input{
            text-align:left;
        }
    }
    .mt-panel-item:after {
        display:none;
    }
}
.buttom-wrap{
    position: relative;
    width:100%;
    height:4.37rem;
    background:#FFF;
}
.buttom{
    position:fixed;
    width:100%;
    height:2.67rem;
    padding:.85rem;
    .address-sure{
        width:100%;
        height:2.67rem;
        border-radius:.21rem;
        background:#2398aa;
        text-align:center;
        line-height:2.67rem;
        font-size:.85rem;
        color:#fff;
    }
}
.mt-get-code{
    margin-left:.85rem;
    width:4.5rem;
    border:1px solid #2398aa;
    color:#FFF;
    background-color:#2398aa;
    line-height:1.6rem;
    height:1.6rem;
}
</style>